<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Example - Add custom template button to the toolbar</title>
    <link type="text/css" rel="stylesheet" href="../css/doc.css" />
	<link type="text/css" rel="stylesheet" href="../js/lib/rainbow/github.css" />
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../js/marvinjslauncher.js"></script>
	<script>
	var templateAttributes;
	var marvinSketcherInstance;
	
	$(document).ready(function handleDocumentReady (e) {
		MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
			marvinSketcherInstance = sketcherInstance;
			templateAttributes = {
					'structure':"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<cml xmlns=\"http://www.chemaxon.com\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.chemaxon.com/marvin/help/formats/schema/mrvSchema_6_1_0.xsd\" version=\"ChemAxon file format v6.1, generated by v6.1.0\">\n<MDocument>\n  <MChemicalStruct>\n    <molecule molID=\"m1\">\n      <atomArray atomID=\"a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12\" elementType=\"C C N C C C O C C O C O\" x2=\"3.189999994039537 1.6499999940395358 0.8799999940395326 -0.6600000059604675 -1.4300000059604656 -2.970000005960466 -3.7400000059604674 -0.6600000059604636 -1.4300000059604623 -0.6600000059604607 0.8799999940395365 1.6499999940395358\" y2=\"-0.831839567470531 -0.8318395674705295 -2.165518689298567 -2.1655186892985645 -0.8318395674705278 -0.8318395674705257 -2.16551868929856 0.5018395543575072 1.8355186761855429 3.1691977980135775 0.501839554357506 1.8355186761855407\"/>\n      <bondArray>\n        <bond id=\"b1\" atomRefs2=\"a1 a2\" order=\"1\"/>\n        <bond id=\"b2\" atomRefs2=\"a2 a3\" order=\"2\"/>\n        <bond id=\"b3\" atomRefs2=\"a2 a11\" order=\"1\"/>\n        <bond id=\"b4\" atomRefs2=\"a3 a4\" order=\"1\"/>\n        <bond id=\"b5\" atomRefs2=\"a4 a5\" order=\"2\"/>\n        <bond id=\"b6\" atomRefs2=\"a5 a6\" order=\"1\"/>\n        <bond id=\"b7\" atomRefs2=\"a5 a8\" order=\"1\"/>\n        <bond id=\"b8\" atomRefs2=\"a6 a7\" order=\"1\"/>\n        <bond id=\"b9\" atomRefs2=\"a8 a9\" order=\"1\"/>\n        <bond id=\"b10\" atomRefs2=\"a8 a11\" order=\"2\"/>\n        <bond id=\"b11\" atomRefs2=\"a9 a10\" order=\"1\"/>\n        <bond id=\"b12\" atomRefs2=\"a11 a12\" order=\"1\"/>\n      </bondArray>\n    </molecule>\n  </MChemicalStruct>\n</MDocument>\n</cml>",
					'name':"Vitamin B6",
					'icon':""
			};
			marvinSketcherInstance.addTemplate(templateAttributes);
		}, function () {
			alert("Cannot retrieve sketcher instance from iframe");
		});
	});
	</script>
</head>
<body>
  	<h1>Marvin JS Example - Add custom template button to the toolbar</h1>
    <div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
    <div class="darkbox">
		<div class="resizable">
	    <iframe src="../editor.html" style="width: 100%; height:100%;" id="sketch" class="sketcher-frame"></iframe>
		</div>
	</div>
	<div>
		<p>Append a custom template button to the toolbar at startup:</p>
		<pre><code data-language="javascript">$(document).ready(function handleDocumentReady (e) {
	MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
		var templateAttributes = {
						'structure':"&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;cml xmlns=\"http://www.chemaxon.com\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.chemaxon.com/marvin/help/formats/schema/mrvSchema_6_1_0.xsd\" version=\"ChemAxon file format v6.1, generated by v6.1.0\"&gt;\n&lt;MDocument&gt;\n  &lt;MChemicalStruct&gt;\n    &lt;molecule molID=\"m1\"&gt;\n      &lt;atomArray atomID=\"a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12\" elementType=\"C C N C C C O C C O C O\" x2=\"3.189999994039537 1.6499999940395358 0.8799999940395326 -0.6600000059604675 -1.4300000059604656 -2.970000005960466 -3.7400000059604674 -0.6600000059604636 -1.4300000059604623 -0.6600000059604607 0.8799999940395365 1.6499999940395358\" y2=\"-0.831839567470531 -0.8318395674705295 -2.165518689298567 -2.1655186892985645 -0.8318395674705278 -0.8318395674705257 -2.16551868929856 0.5018395543575072 1.8355186761855429 3.1691977980135775 0.501839554357506 1.8355186761855407\"/&gt;\n      &lt;bondArray&gt;\n        &lt;bond id=\"b1\" atomRefs2=\"a1 a2\" order=\"1\"/&gt;\n        &lt;bond id=\"b2\" atomRefs2=\"a2 a3\" order=\"2\"/&gt;\n        &lt;bond id=\"b3\" atomRefs2=\"a2 a11\" order=\"1\"/&gt;\n        &lt;bond id=\"b4\" atomRefs2=\"a3 a4\" order=\"1\"/&gt;\n        &lt;bond id=\"b5\" atomRefs2=\"a4 a5\" order=\"2\"/&gt;\n        &lt;bond id=\"b6\" atomRefs2=\"a5 a6\" order=\"1\"/&gt;\n        &lt;bond id=\"b7\" atomRefs2=\"a5 a8\" order=\"1\"/&gt;\n        &lt;bond id=\"b8\" atomRefs2=\"a6 a7\" order=\"1\"/&gt;\n        &lt;bond id=\"b9\" atomRefs2=\"a8 a9\" order=\"1\"/&gt;\n        &lt;bond id=\"b10\" atomRefs2=\"a8 a11\" order=\"2\"/&gt;\n        &lt;bond id=\"b11\" atomRefs2=\"a9 a10\" order=\"1\"/&gt;\n        &lt;bond id=\"b12\" atomRefs2=\"a11 a12\" order=\"1\"/&gt;\n      &lt;/bondArray&gt;\n    &lt;/molecule&gt;\n  &lt;/MChemicalStruct&gt;\n&lt;/MDocument&gt;\n&lt;/cml&gt;",
						'name':"Vitamin B6",
						'icon':""
				};
		sketcherInstance.addTemplate(templateAttributes);
	}, function () {
		alert("Cannot retrieve sketcher instance from iframe");
	});
});</code>
		</pre>
	</div>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
  </body>
</html>
